﻿<template>
    <div v-cloak class="flex-column bg-light">
        <component is="style" />
        <template v-if="show">
            <van-calendar ref="vantCalendar" color="#07c160" :show-subtitle="false" type="single" :formatter="formatter"
                          :poppable="false" :min-date="minDate" :max-date="maxDate" :show-confirm="false" :default-date="date"
                          v-on:confirm="onConfirm" :style="{ height: 'auto' }">
                <template v-slot:title>
                    <div class="flex-row padding-lr-10">
                        <div v-on:click="!prevMonth.disabled&&goto(0,prevMonth.date)"
                             :class="[prevMonth.disabled?'color-gray':'color-blue']">
                            <van-icon name="arrow-left"></van-icon>
                            {{prevMonth.m}}
                        </div>

                        <div class="flex-row-fill text-center">
                            <text class="bold">{{currentMonth.m}}</text>
                            <van-icon name="location-o" class="color-blue"
                                      v-on:click="goto(1,currentMonth.date)">今天</van-icon>
                        </div>
                        <div :class="[nextMonth.disabled?'color-gray':'color-blue']"
                             v-on:click="!nextMonth.disabled&&goto(2,nextMonth.date)">
                            {{nextMonth.m}}
                            <van-icon name="arrow"></van-icon>
                        </div>
                    </div>
                </template>
            </van-calendar>
            <div class="flex-column-fill hidden margin-tb-20">
                <van-cell-group inset :border="false" class="hidden-x" style="max-height:100%;">
                    <van-cell center title="姨妈来了？">
                        <template #right-icon>
                            <van-switch v-model="checked" v-on:change="change(checked)" size="24" active-color="#ee0a24" inactive-color="#dcdee0"></van-switch>
                        </template>
                    </van-cell>
                </van-cell-group>
            </div>
            <div class="margin-tb-20" v-if="!optor.openId_R">
                <van-cell-group inset :border="false">
                    <van-cell center title="关联用户">
                    <template #right-icon>
                        <hxt-select v-model="openId" label="openId" text="uiName" height="auto" title="选择关联用户" placeholder="选择关联用户" v-on:load="loadUser" closeable get-container="body" v-on:change="userRelationSave"></hxt-select>
                    </template>
                </van-cell>
                </van-cell-group>
            </div>
        </template>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'menstruation',
            data: function () {
                var _this = this, optor=hxt.store.optor;
                return {
                    optor: optor,
                    browser: hxt.wxBrowser(), // 1：手机微信；4：小程序

                    minDate: hxt.dateAdd('d', 0, hxt.dateConfig().monthBegin),
                    maxDate: hxt.dateAdd('d', 0, hxt.dateConfig().monthEnd),
                    date: new Date(),
                    msId: 0,
                    show: false,
                    openId:'',
                };
            },
            computed: {
                checked: function () {
                    return this.msId > 0;
                },
                currentMonth: function () {
                    return {
                        m: hxt.dateFormat("yyyy年MM月", this.date),
                        date: this.date,
                    };
                },
                prevMonth: function () {
                    return {
                        m: hxt.dateFormat('M月', hxt.dateAdd('M', -1, hxt.dateFormat('yyyy-MM-01', this.date))),
                        date: hxt.dateAdd('M', -1, hxt.dateFormat('yyyy-MM-01', this.date)),
                        disabled: hxt.dateAdd('M', -6, hxt.dateFormat('yyyy-MM-dd')) > hxt.dateAdd('M', 0, this.date)
                    };
                },
                nextMonth: function () {
                    return {
                        m: hxt.dateFormat('M月', hxt.dateAdd('M', +1, hxt.dateFormat('yyyy-MM-01', this.date))),
                        date: hxt.dateAdd('M', +1, hxt.dateFormat('yyyy-MM-01', this.date)),
                        disabled: hxt.dateAdd('M', +6, hxt.dateFormat('yyyy-MM-dd')) < hxt.dateAdd('M', 0, this.date)
                    };
                }
            },
            activated: function () {

            },
            watch: {
                date: function (val) {
                    var _this = this;
                    var obj = _this.list.find(function (item) {
                        return item.msDate == hxt.dateFormat("yyyy-MM-dd", val);
                    });
                    if (!!obj) _this.msId = obj.msId;
                    else _this.msId = 0;
                }
            },
            mounted: function () {
                var _this = this;
                _this.$parent.showHome = true;
                _this.loadList();
            },
            methods: {
                loadList: function () {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/menstruationList',
                        data: {
                            beginTime: hxt.dateConfig(this.date).monthBegin,
                            endTime: hxt.dateConfig(this.date).monthEnd,
                            pageIndex: 1,
                            pageSize: 100
                        },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('加载失败：：' + res.errmsg + '，请稍后重试！');
                            _this.list = res.data.list;
                            _this.$nextTick(function () {
                                _this.show = true;
                                var obj = _this.list.find(function (item) {
                                    return item.msDate == hxt.dateFormat("yyyy-MM-dd", _this.date);
                                });
                                if (!!obj) _this.msId = obj.msId;
                                else _this.msId = 0;
                            });
                        }
                    });
                },
                formatter: function (day) {
                    if (!this.list) return day;
                    var obj = this.list.find(function (item) {
                        return item.msDate == hxt.dateFormat("yyyy-MM-dd", day.date);
                    });
                    if (!!obj) {
                        day.bottomInfo = '♥';
                    }
                    return day;
                },
                onConfirm: function (e) {
                    var _this = this;
                    _this.date = e;
                },
                loadUser: function (func) {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/optorList',
                        data: { },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('加载用户失败：：' + res.errmsg + '，请稍后重试！');
                            var list = [];
                            res.data.map(function (item) {
                                if (item.openId != _this.optor.openId && !item.openId_R) list.push({ openId: item.openId, uiName: !!item.uiName ? item.uiName : item.openId });
                            })
                            func(list);
                        }
                    });
                },
                userRelationSave: function (g) {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/userRelationSave',
                        data: { optType: 0, openId_R: g.openId },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('用户关联失败：：' + res.errmsg);
                            _this.show = false;
                            hxt.success('关联成功');
                            _this.optor.openId_R = g.openId;
                            _this.loadList();
                        }
                    });
                },
                goto: function (type, date) { //0上一月 1今天 2下一月
                    var _this = this,
                        date = type == 1 ? new Date() : date;
                    _this.date = date;
                    _this.show = false;
                    _this.loadList();
                    _this.$nextTick(function () {
                        _this.minDate = new Date(hxt.dateConfig(date).monthBegin);
                        _this.maxDate = new Date(hxt.dateConfig(date).monthEnd);
                    });
                },
                change: function (e) {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link  + "pc/menstruationSave",
                        data: {
                            optType: !e ? 0 : 2,
                            msDate: hxt.dateFormat("yyyy-MM-dd", _this.date),
                            msId: _this.msId
                        },
                        ok: function (res) {
                            if (res.code != 0) {
                                hxt.error('操作失败：' + res.errmsg);
                                return;
                            };
                            _this.show = false;
                            hxt.success('操作成功');
                            _this.loadList();
                        }
                    });
                }
            },
            components: {

            }
        };
    })(window.$jscript.fn);
</script>
<style lang="scss">
    .van-calendar__bottom-info {
        color: red;
        font-size:15px !important;
    }
</style>